<template>
  <el-row>
    <el-col :span="24">
      <el-upload
        ref="fileUpload"
        class="upload-demo"
        :action="action"
        :headers="getHeaders"
        :data="fileData"
        :before-upload="beforeUpload"
        :before-remove="beforeRemove"
        :on-success="handleSuccess"
        :accept="accept"
        :on-error="handleError"
        multiple
        :limit="limit"
        :show-file-list="true"
        :on-exceed="handleExceed"
        :auto-upload="autoUpload"
        :file-list="list"
      >
        <el-button size="small"
          ><i class="el-icon-upload el-icon--right"></i>上传</el-button
        >
      </el-upload>
    </el-col>
    <!-- <el-col :span="4" v-if="fileName">
      <el-button :title="fileName">下载</el-button>
    </el-col> -->
  </el-row>
</template>
<script>
import { getToken } from "@/utils/auth";
export default {
  props: {
    action: {
      type: String,
      default: function() {
        const url = process.env.VUE_APP_BASE_API + "/file/upload";
        return url;
      }
    },
    name: {
      type: String,
      default: function() {
        return null;
      }
    },
    fileData: {
      type: Object,
      default: function() {
        return new Object();
      }
    },
    path: {
      type: String,
      default: function() {
        return null;
      }
    },
    title: {
      type: String,
      default: function() {
        return "请上传相应佐证材料";
      }
    },
    list: {
      type: Array,
      default: function() {
        return [];
      }
    },
    limit: {
      type: Number,
      default: function() {
        return 5;
      }
    },
    size: {
      type: Number,
      default: function() {
        return 50;
      }
    },
    accept: {
      type: String,
      default: () => {
        return ".pdf,.doc,.docx,.txt,.xlsx,.xls,.pptx,.ppt,.png,.jpg,.rar,.zip";
      }
    },
    autoUpload: {
      type: Boolean,
      default: () => {
        return true;
      }
    }
  },
  watch: {
    /*
    fileName: function (newValue, oldValue) {
      this.$emit("update:name", newValue);
    },
    */
  },
  data() {
    return { list: [] };
  },
  computed: {
    fileName: {
      get() {
        return this.name;
      },
      set(value) {
        this.$emit("update:name", value);
      }
    },
    getUploadURL() {
      const url = process.env.BASE_API + "/file/up";
      return url;
    },
    getHeaders() {
      const token = getToken();
      return { Authorization: "Bearer " + token };
    }
  },
  created() {
    // this.$refs.fileUpload.clearFiles();
  },
  methods: {
    submitFile() {
      let temp = this.$refs.fileUpload;
      if (temp.uploadFiles.length === 0) {
        this.$message({
          type: "error",
          message: "请上传文件"
        });
        this.$emit("uploadError");
        return;
      }
      temp.submit();
    },
    handleSuccess(response, file, fileList) {
      if (!response.success) {
        this.$message({
          type: "error",
          message: response.message
        });
        console.log("文件上传异常：" + response.message);
        fileList.splice(
          fileList.findIndex(item => item.uid === file.uid),
          1
        );
        this.$emit("uploadError");
        return;
      }
      this.$emit("uploadSuccess");
    },
    handleExceed(files, fileList) {
      this.$message({
        message: "已超出上传文件个数限制，最多可上传" + this.limit + "个文件",
        type: "warning",
        duration: 2000
      });
    },
    beforeRemove(file, fileList) {
      if (file.status === "ready") {
        return;
      }
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleError(err, file, fileList) {
      this.$message({
        message: "文件上传失败",
        type: "error",
        duration: 2000
      });
      fileList.splice(
        fileList.findIndex(item => item.fileId === file.fileId),
        1
      );
      this.$emit("uploadError");
    },
    beforeUpload(file) {
      const fileName = file.name;
      const isLtM = file.size / 1024 / 1024 < this.size;
      let types = this.accept.split(",");
      let result = types.some(function(x) {
        return fileName.endsWith(x.trim());
      });

      if (!result) {
        this.$message.error("上传的文件只能是 " + this.accept + "格式!");
      }
      if (!isLtM) {
        this.$message.error("上传文件大小不能超过" + this.size + "MB!");
      }
      return result && isLtM;
    }
  }
};
</script>
